<template>
    <HeaderBar :title="$t('fackbook.title')" />
    <view class="fackbook-container main-container">
        <view class="tips">{{$t('fackbook.tips')}}</view>
        <view class="form-container">
            <view class="item subject">
                <wd-input
                    v-model="state.title"
                    :placeholder="$t('fackbook.subject')"
                    placeholderStyle="font-size:26rpx"
                    no-border
                />
            </view>
            <view class="item progress">
                <wd-textarea
                    v-model="state.content"
                    :placeholder="$t('fackbook.progress')"
                    placeholderStyle="font-size:26rpx"
                    no-border
                />
            </view>
        </view>
        <view class="bottom-container">
            <view class="form-btns" @click="onSubmit">{{$t('common.submit')}}</view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import HeaderBar from '@/components/HeaderBar';
import { onLoad } from '@dcloudio/uni-app';
import { toLang } from '@/utils/lang';
import { NavigateTo, showToast, getStorage, navigateBack } from '@/utils/common';
import { addFeedback } from '@/api/mine';

const state = reactive({
    title: '',
    content: ''
});

//提交
const onSubmit = async () => {
    if (!state.title) {
        showToast({ title: toLang('fackbook.subject') });
        return;
    }
    if (!state.content) {
        showToast({ title: toLang('fackbook.progress') });
        return;
    }

    const res = await addFeedback(state);
    if (res.code !== 200) {
        return;
    }
    showToast({ title: toLang('common.success') });
    navigateBack(1);
};
</script>

<style scoped lang="scss">
.fackbook-container {
    padding: 40rpx;
    .tips {
        font-size: 32rpx;
    }
    .form-container {
        .item {
            margin-top: 32rpx;
            background: #f0f2f5;
            border-radius: 20rpx;
        }
        .subject {
            padding: 0 30rpx;
        }
        ::v-deep .wd-input {
            height: 88rpx !important;
            background: none !important;
        }
        ::v-deep .wd-textarea,
        ::v-deep .wd-textarea__value {
            background: none !important;
        }
    }
}
</style>
